<template>
  <div>
    <el-container>
      <el-header>
        <div class="daohang">
          <el-menu :default-active="activeIndex"
                   class="el-menu-demo"
                   mode="horizontal"
                   @select="handleSelect">
            <el-menu-item index="1" @click="goD">首页</el-menu-item>
            <el-menu-item index="2"
                          @click="goB">学术动态</el-menu-item>
            <el-menu-item index="3"
                          @click="goC">文献库</el-menu-item>
            <el-menu-item index="4">文件库</el-menu-item>
            <el-menu-item index="5">案例库</el-menu-item>
            <el-menu-item index="4">联系我们</el-menu-item>
            <el-menu-item index="5">关于我们</el-menu-item>
          </el-menu>
        </div>
      </el-header>
      <el-container>
        <el-aside width="300px">
          <div class="aside_div">
            <div class="aside_text">
              <i class="el-icon-s-home"></i>
              <b style="font-size:20px;color:white">文献库</b>
            </div>
          </div>
          <div style="width:100%;height:400px;">
            <div class="aside_main">
              <el-link :underline="false">国内文献库</el-link>
              <el-link :underline="false">学术论文</el-link>
              <el-link :underline="false">学术论著</el-link>
              <el-link :underline="false">国外文献库</el-link>
            </div>
          </div>
          <div>
            <div class="aside_div1">
              <div class="aside_text">
                <i class="el-icon-phone-outline"></i>
                <b style="font-size:20px;color:white">联系我们</b>
              </div>
            </div>
            <div style="display: flex;flex-direction: column;margin-left: 30px;
align-items: flex-start">
              <p>天津职业技术师范大学</p>
              <p>信息技术工程学院·软件工程学院</p>
              <p>软件1902班</p>
              <p>张馨心 0304190225</p>
              <p>联系电话：15692216468</p>
            </div>
          </div>
        </el-aside>
        <el-main>
          <div class="main_div">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>活动管理</el-breadcrumb-item>
              <el-breadcrumb-item>活动列表</el-breadcrumb-item>
              <el-breadcrumb-item>活动详情</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div>
            <div class="divider"></div>
            <div class="main_main">
              <div class="input">
                <el-form :inline="true"
                         label-width="80px">
                  <el-form-item label="活动名称">
                    <el-input style="width:250px"></el-input>
                  </el-form-item>
                  <el-form-item label="活动时间">
                    <el-col :span="11">
                      <el-date-picker type="date"
                                      placeholder="选择日期"></el-date-picker>
                    </el-col>
                    <el-col class="line"
                            :span="2">-</el-col>
                    <el-col :span="11">
                      <el-time-picker placeholder="选择时间"
                                      style="width: 100%;"></el-time-picker>
                    </el-col>
                  </el-form-item>
                  <el-button type="success">成功按钮</el-button>
                </el-form>
              </div>
              <div class="divider1">
                <div>
                  <router-view />
                </div>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  methods: {
    goB () {
      // eslint-disable-next-line standard/object-curly-even-spacing
      this.$router.push({ 'path': '/home/second/son' })
    },
    goC () {
      // eslint-disable-next-line standard/object-curly-even-spacing
      this.$router.push({ 'path': '/home/second/child' })
    },
    goD () {
      // eslint-disable-next-line standard/object-curly-even-spacing
      this.$router.push({ 'path': '/home/first' })
    }
  }
}
</script>
<style scoped>
.el-aside {
  background-color: aliceblue;
  margin-left: 20px;
  height: auto;
  margin-top: 30px;
}
.el-main {
  background-color: rgb(252, 252, 252);
  margin-right: 20px;
  margin-left: 30px;
  margin-top: 30px;
  border-radius: 5px;
  width: auto;
}
.aside_div {
  width: 100%;
  height: 50px;
  background-color: rgb(88, 196, 133);
  border-radius: 5px;
  line-height: 50px;
}
.main_div {
  width: 100%;
  height: 50px;
  float: right;
}
.el-breadcrumb {
  float: right;
  margin-top: 15px;
  margin-right: 10px;
}
.el-icon-s-home {
  font-size: 30px;
  color: aliceblue;
}
.aside_text {
  margin-left: 45px;
}
.aside_main {
  margin-left: 50px;
  float: left;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-bottom: 40px;
  flex-direction: column;
  align-items: flex-start;
}
.el-link {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 50px;
  font-size: 20px;
}
.aside_div1 {
  width: 100%;
  height: 50px;
  background-color: rgb(30, 32, 31);
  border-radius: 5px;
  line-height: 50px;
}
.divider {
  width: 100%;
  background-color: rgb(201, 201, 201);
  height: 2px;
  margin-top: 50px;
  border-radius: 5px;
}
.main_main {
  border-top: 2px solid rgb(5, 212, 84);
  border-bottom: 2px solid rgb(5, 212, 84);
  border-left: 2px solid rgb(5, 212, 84);
  border-right: 2px solid rgb(5, 212, 84);
  width: 100%;
  height: 700px;
}
.input {
  width: 100%;
  height: 70px;
  display: flex;
  margin-top: 30px;
  margin-left: 50px;
  margin-right: 50px;
}
.divider1 {
  width: 100%;
  background-color: rgb(5, 212, 84);
  height: 2px;
  margin-bottom: 20px;
}
.el-icon-phone-outline {
  font-size: 30px;
  color: aliceblue;
}
.el-menu {
  background-color: rgb(237, 238, 238);
  margin-left: 40px;
}
.el-menu-item {
  margin-right: 40px;
  font-weight: 900;
}
</style>
